<template>
  <div>
    <div class="sing">
      <div class="menu">
        <menu-list
          :menu="menu2"
          title="分类(默认热门)"
          v-model="select_type"
        ></menu-list>
        <menu-list
          :menu="menu1"
          title="全部"
          v-model="select_letter"
        ></menu-list>
      </div>
      <!-- 下拉刷新 -->
      <van-pull-refresh
        v-model="isLoading"
        loading-text="拼命加载中"
        @refresh="onRefresh"
      >
        <!-- 歌手列表 -->
        <ul class="content">
          <li v-for="item in data" :key="item.id" class="item" @click="$router.push('/singers/'+item.id)">
            <img :src="item.picUrl" v-lazy="item.picUrl" alt="" />
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </van-pull-refresh>
    </div>
    <transition enter-active-class="fly-in" leave-active-class="fly-out">
      <router-view />
    </transition>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MenuList from "components/singers/menu-list";

export default {
  name: "Singers",
  components: { MenuList },
  data() {
    return {
      menu1: [], //字母
      menu2: [], //组合
      select_type: -1,
      select_letter: -1,
      // 下拉刷新
      isLoading: false
    };
  },
  computed: {
    ...mapState({
      data: (state) => state.singers.singerData,
      loading: (state) => state.singers.loading,
    }),
  },
  watch: {
    select_type() {
      this.getParams();
    },
    select_letter() {
      this.getParams();
    },
    loading(newVal) {
      this.isLoading = newVal;
    },
  },
  created() {
    this.menu1 = new Array(26).fill(65).map((item, index) => {
      return {
        label: String.fromCharCode(item + index),
        id: String.fromCharCode(97 + index),
      };
    });
    const types = [
      { label: "男", id: 1 },
      { label: "女", id: 2 },
      { label: "组合", id: 3 },
    ];
    const areas = [
      { label: "华语", id: 7 },
      { label: "欧美", id: 96 },
      { label: "日本", id: 8 },
      { label: "韩国", id: 16 },
      { label: "其他", id: 0 },
    ];
    let result = [];
    areas.forEach((area) => {
      types.forEach((type) => {
        result.push({
          label: area.label + type.label,
          id: area.id.toString() + type.id.toString(),
          typeId: type.id,
          areaId: area.id,
        });
      });
    });
    this.menu2 = result;
    //获取默认参数
    this.getParams();
  },
  methods: {
    getParams(offset = 0) {
      let data = this.menu2.filter((item) => item.id == this.select_type);
      let area = data.length == 0 ? -1 : data[0].areaId;
      let type = data.length == 0 ? -1 : data[0].typeId;
      let initial = this.select_letter;
      this.$store.dispatch("singers/getSingerList", {
        area,
        type,
        initial,
        offset,
      });
    },
    //上拉刷新事件
    onRefresh() {
      let n = ~~(Math.random() * 10) + 1;
      this.getParams(n);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/global-style.scss";
.menu {
  position: fixed;
  top: 90px;
  left: 0;
  right: 0;
  z-index: 100;
}
.van-pull-refresh {
  padding-top: 90px;
  ::v-deep .van-loading,
  ::v-deep .van-loading__text {
    color: $theme-color;
  }
}
.content {
  li {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1.5px solid rgb(228, 228, 228);
    img {
      width: 50px;
      height: 50px;
      border-radius: 5px;
    }
    span {
      font-size: 14px;
      margin-left: 15px;
      color: #666;
    }
  }
}
</style>
